<template>
  <div class="built">
    <a-row type="flex" justify="space-between" :gutter="126">
      <a-col :span="12" v-for="(item,index) in builtList" :key="index">
        <div class="built-title clearfix">
          <span>0{{(index+1)}}</span>
          <p>{{item.title}}</p>
        </div>
        <p class="text">{{item.text}}</p>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  props: ['builtList']
};
</script>

<style lang="stylus" scoped>
.built {
  margin-top: 80px;
  margin-bottom: 40px;

  .text {
    margin-bottom: 50px;
    text-align: justify;
    padding-left: 99px;
    font: 18px / 30px '微软雅黑';
    color: #696969;
  }
}

.built-title {
  margin-bottom: 20px;

  span {
    width: 66px;
    height: 76px;
    display: block;
    float: left;
    font: 29px / 76px Arial;
    background-image: url('../../assets/images/built-title.png');
    text-align: center;
    color: white;
    margin-right: 33px;
  }

  p {
    font: 35px / 76px Arial;
    color: #000;
    float: left;
  }
}
</style>